import React, { useState } from 'react';
import { View, Text, StyleSheet, ImageBackground, TouchableOpacity } from 'react-native';
import { Icon } from 'react-native-elements';
import { useNavigation } from '@react-navigation/native';
import CustomModal from './CustomModal';

const HomePage = () => {
  const [modalVisible, setModalVisible] = useState(false);
  const [isButtonSelected, setIsButtonSelected] = useState(null);
  const navigation = useNavigation();

  const handleButtonClick = (button) => {
    setIsButtonSelected(button);

    if (button === 'yes') {
      navigation.navigate('NextPage');
    }

    if (button !== null) {
      setModalVisible(false);
      setTimeout(() => {
        setIsButtonSelected(null);
      }, 200);
    }
  };

  return (
    <View style={styles.container}>
      <View style={styles.textContainer}>
        <Text style={styles.text}>主页地图信息等</Text>
      </View>

      <ImageBackground
        source={require('../images/homeBackGround.png')}
        style={styles.imageBackground}
        resizeMode="cover"
      >
        <TouchableOpacity onPress={() => setModalVisible(true)}>
          <Text style={styles.openModalButton}>打开弹窗</Text>
        </TouchableOpacity>

        <CustomModal
          visible={modalVisible}
          onClose={() => setModalVisible(false)}
          title="违章提示"
          content="经智能分析，前方车辆存在闯红灯违章行为，若核实成功，将能得到50元奖励。系统已自动拍摄并保存证据。为一同维护道路安全，您是否选择举报该行为："
          iconName="warning"
          iconColor="#faad14"
          buttons={[
            {
              text: '否',
              onPress: () => handleButtonClick('no'),
              style: { backgroundColor: 'white', borderWidth: 1, borderColor: '#1890ff' },
              textStyle: { color: '#1890ff' }
            },
            {
              text: '是',
              onPress: () => handleButtonClick('yes'),
              style: { backgroundColor: '#1890ff' },
              textStyle: { color: 'white' }
            }
          ]}
        />
      </ImageBackground>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
  },
  textContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    padding: 10,
  },
  text: {
    color: 'white',
    fontSize: 20,
    textAlign: 'center',
  },
  imageBackground: {
    flex: 18,
    width: '100%',
    height: '100%',
  },
  openModalButton: {
    padding: 10,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    color: 'white',
    textAlign: 'center',
    fontSize: 18,
  },
});

export default HomePage;
